<template>
  <el-dialog v-model="model" @close="closedDialog">
    <el-form
      ref="smsAppConfigFormRef"
      :model="form"
      label-width="120px"
      :rules="rules"
    >
      <el-row>
        <!-- 配置编码 -->
        <el-col :span="12" v-if="!update">
          <el-form-item
            :label="$t('smsAppConfig.configCode')"
            prop="configCode"
          >
            <el-input
              v-model="form.configCode"
              :placeholder="$t('smsAppConfig.configCodeRead')"
              maxlength="15"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" prop="configCode" v-else>
          <el-form-item :label="$t('smsAppConfig.configCode')">
            <el-input
              v-model="form.configCode"
              :placeholder="$t('smsAppConfig.configCodeRead')"
              maxlength="15"
              show-word-limit
              clearable
              disabled
            />
          </el-form-item>
        </el-col>
        <!-- 配置名称 -->
        <el-col :span="12">
          <el-form-item
            :label="$t('smsAppConfig.configName')"
            prop="configName"
          >
            <el-input
              v-model="form.configName"
              :placeholder="$t('smsAppConfig.configNameRead')"
              maxlength="15"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
        <!-- 消息类型 -->
        <el-col :span="12">
          <el-form-item
            :label="$t('smsAppConfig.configType')"
            prop="configType"
          >
            <jmash-select
              v-model="form.configType"
              :data="Dict.configTypeDict.values"
              :placeholder="$t('smsAppConfig.configTypeRead')"
              clearable
              class="select-width"
            />
          </el-form-item>
        </el-col>
        <!-- 账户名 -->
        <el-col :span="12" v-if="form.configType === 'EMAIL'">
          <el-form-item
            :label="$t('smsAppConfig.accountName')"
            prop="accountName"
          >
            <el-input
              v-model="form.accountName"
              :placeholder="$t('smsAppConfig.accountNameRead')"
              maxlength="10"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
        <!-- 服务产商 -->
        <el-col :span="12">
          <el-form-item :label="$t('smsAppConfig.provider')" prop="provider">
            <jmash-select
              v-model="form.provider"
              :data="Dict.providerDict.values"
              :placeholder="$t('smsAppConfig.providerRead')"
              clearable
              class="select-width"
            />
          </el-form-item>
        </el-col>
        <!-- 访问key -->
        <el-col :span="12" v-if="!update">
          <el-form-item
            :label="$t('smsAppConfig.accessKeyId')"
            prop="accessKeyId"
          >
            <el-input
              v-model="form.accessKeyId"
              :placeholder="$t('smsAppConfig.accessKeyIdRead')"
              maxlength="60"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-else>
          <el-form-item :label="$t('smsAppConfig.accessKeyId')">
            <el-input
              v-model="form.accessKeyId"
              :placeholder="$t('smsAppConfig.accessKeyIdRead')"
              maxlength="60"
              show-word-limit
              clearable
              disabled
            />
          </el-form-item>
        </el-col>
        <!-- 是否默认 -->
        <el-col :span="12">
          <el-form-item :label="$t('smsAppConfig.isDefault')" prop="isDefault">
            <enum-radio
              v-model="form.isDefault"
              :data="Dict.isDefaultDict.values"
            />
          </el-form-item>
        </el-col>
        <!-- 访问秘钥 -->
        <el-col :span="24" v-if="!update">
          <el-form-item
            :label="$t('smsAppConfig.accessKeySecret')"
            prop="accessKeySecret"
          >
            <el-input
              v-model="form.accessKeySecret"
              :placeholder="$t('smsAppConfig.accessKeySecretRead')"
              maxlength="250"
              type="textarea"
              show-word-limit
              clearable
              :autosize="{ minRows: 3 }"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closedDialog">{{ $t("common.cancel") }}</el-button>
        <el-button type="primary" @click="submitForm">
          {{ $t("common.confirm") }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, type PropType } from "vue";
import { type FormInstance, type FormRules, ElMessage } from "element-plus";
import EnumRadio from "@/components/EnumRadio/index.vue";
import { Dict } from "@/api/sms";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

import type {
  SmsAppConfigKey,
  SmsAppConfigFormReq,
  SmsAppConfigCreateReq,
  SmsAppConfigUpdateReq,
} from "@/api/sms/sms-app-config/types";
import { smsAppConfigApi } from "@/api/sms/sms-app-config/index";

const smsAppConfigFormRef = ref<FormInstance>();

let form: SmsAppConfigFormReq = reactive<SmsAppConfigFormReq>({
  requestId: Math.random() * 10 + "",
  updateMask: "configName,configType,provider,isDefault",
  isDefault: false,
});

const rules = reactive<FormRules<SmsAppConfigFormReq>>({
  configCode: [
    {
      required: true,
      message: t("smsAppConfig.configCodeRead"),
      trigger: "change",
    },
  ],
  configName: [
    {
      required: true,
      message: t("smsAppConfig.configNameRead"),
      trigger: "change",
    },
  ],
  configType: [
    {
      required: true,
      message: t("smsAppConfig.configTypeRead"),
      trigger: "change",
    },
  ],
  provider: [
    {
      required: true,
      message: t("smsAppConfig.providerRead"),
      trigger: "change",
    },
  ],
  accessKeyId: [
    {
      required: true,
      message: t("smsAppConfig.accessKeyIdRead"),
      trigger: "change",
    },
  ],
  accessKeySecret: [
    {
      required: true,
      message: t("smsAppConfig.accessKeySecretRead"),
      trigger: "change",
    },
  ],
  accountName: [
    {
      required: true,
      message: t("smsAppConfig.accountNameRead"),
      trigger: "change",
    },

  ]
});

const model = defineModel<boolean>();

const props = defineProps({
  entityKey: {
    type: Object as PropType<SmsAppConfigKey>,
    default: () => {},
  },
});

const emits = defineEmits(["refresh"]);

const keys = Object.keys(props.entityKey);

const update = ref(keys.length >= 1);

if (update.value) {
  smsAppConfigApi.findById(props.entityKey).then(({ data }) => {
    Object.assign(form, data);
  });
}
// 提交表单校验
const submitForm = async () => {
  await smsAppConfigFormRef.value?.validate((valid) => {
    if (valid) {
      if (update.value) {
        smsAppConfigApi
          .update(form as SmsAppConfigUpdateReq)
          .then((response) => {
            console.log(response);
            if (response.status === 200) {
              ElMessage({
                message: t("common.submitSuccess"),
                type: "success",
              });
              if (model.value) {
                model.value = false;
              }
              emits("refresh", response.status === 200);
            }
          });
      } else {
        smsAppConfigApi
          .create(form as SmsAppConfigCreateReq)
          .then((response) => {
            console.log(response);
            if (response.status === 200) {
              ElMessage({
                message: t("common.submitSuccess"),
                type: "success",
              });
              if (model.value) {
                model.value = false;
              }
              emits("refresh", response.status === 200);
            }
          });
      }
    }
  });
};

// 关闭弹框
function closedDialog() {
  if (model.value) {
    model.value = false;
  }
}
</script>
<style scoped lang="scss">
.position-center {
  position: absolute;
  right: 0;
  top: 30%;
  transform: translate(0, -30%);
}

.plus-position {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 8px;
}
.select-width {
  width: 314px !important;
}
</style>
